<template>
  <div class="goodleft" ref="wrapper" style="background: #f3f5f7;">
    <ul>
      <li v-for="(item, index) in listleft" :key="item.id" :class="chageindex == index ? 'changeColor' : ''" @click="headclick(index)">
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default{
  name: 'goodleft',
  props: {
    listleft: Array,
    chageindex: Number
  },
  data () {
    return {
      itemclass: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    headclick (e) {
      this.itemclass = e
      // 抛出事件chage给父组件监听并传值
      this.$emit('chage', this.itemclass)
    },
    init () {
      // 初始化滑动设置
      this.scroll = new Bscroll(this.$refs.wrapper, {mouseWheel: true, click: true, tap: true})
    }
  }
}
</script>

<style scoped>
.goodleft{
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 80px;
background: #f3f5f7;
height:100%;
}
ul{
overflow: hidden;
margin:0;
padding: 0;
background: #f3f5f7;
}
li{
height: 54px;
width: 80px;
display: table;
}
span{
font-size:12px;
font-weight:200;
line-height: 14px;
display: table-cell;
vertical-align: middle;
padding-left: 12px;
}
.changeColor{
background: #fff;
}
</style>
